// 导入React Three Fiber库中的Canvas组件，用于在React中创建和渲染一个WebGL canvas以呈现3D场景
import { Canvas } from "@react-three/fiber";

// 导入React的核心功能模块：Suspense（用于异步加载资源）、useEffect、useRef和useState Hook
import { Suspense, useEffect, useRef, useState } from "react";

// 导入背景音乐文件sakura.mp3
import sakura from "../assets/sakura.mp3";
// 导入自定义组件：HomeInfo（用于显示当前阶段信息）和Loader（用于加载时的占位符）
import { HomeInfo, Loader } from "../components";
// import { HomeInfo } from '../components/HomeInfo';
// import { Loader } from "../components/Loader";
// 导入控制音乐播放/暂停的图标引用
import { soundoff, soundon } from "../assets/icons";
// 导入3D模型组件：Bird, Island, Plane, Sky
import { Bird, Island, Plane, Sky } from "../models";
// import { Bird } from '../models/Bird'
// import { Island } from "../models/lsland";
// import { Plane } from "../models/Plane";
// import { Sky } from '../models/Sky'

// 定义Home组件
const Home = () => {
  // 创建音频元素ref，并设置音量与循环播放属性
  const audioRef = useRef(new Audio(sakura));
  audioRef.current.volume = 0.4;
  audioRef.current.loop = true;

  // 状态管理变量：当前阶段数、是否旋转、是否播放音乐
  const [currentStage, setCurrentStage] = useState(1);
  const [isRotating, setIsRotating] = useState(false);
  const [isPlayingMusic, setIsPlayingMusic] = useState(false);

  // 使用Effect Hook监听isPlayingMusic状态变化，根据其值自动播放或暂停音乐
  useEffect(() => {
    if (isPlayingMusic) {
      audioRef.current.play();
    } else {
      audioRef.current.pause();
    }
    // 清除函数，在组件卸载时停止播放音乐
    return () => {
      audioRef.current.pause();
    };
  }, [isPlayingMusic]);

  // 根据屏幕尺寸调整飞机（Biplane）的缩放比例和位置
  const adjustBiplaneForScreenSize = () => {
    // 根据窗口宽度计算合适的scale和position
    let screenScale, screenPosition;
    if (window.innerWidth < 768) {
      screenScale = [1.5, 1.5, 1.5];
      screenPosition = [0, -1.5, 0];
    } else {
      screenScale = [3, 3, 3];
      screenPosition = [0, -4, -4];
    }
    return [screenScale, screenPosition];
  };

  // 根据屏幕尺寸调整岛屿（Island）的缩放比例和位置
  const adjustIslandForScreenSize = () => {
    let screenScale, screenPosition;
    if (window.innerWidth < 768) {
      screenScale = [0.9, 0.9, 0.9];
      screenPosition = [0, -6.5, -43.4];
    } else {
      screenScale = [1, 1, 1];
      screenPosition = [0, -6.5, -43.4];
    }
    return [screenScale, screenPosition];
  };

  // 调整飞机和岛屿的初始缩放比例和位置
  const [biplaneScale, biplanePosition] = adjustBiplaneForScreenSize();
  const [islandScale, islandPosition] = adjustIslandForScreenSize();

  // 返回jsx元素结构，包含顶部信息栏、3D场景Canvas以及底部音乐播放按钮
  return (
    <section className='w-full h-screen relative'>
      {/* 显示当前阶段信息 */}
      <div className='absolute top-28 left-0 right-0 z-10 flex items-center justify-center'>
        {currentStage && <HomeInfo currentStage={currentStage} />}
      </div>

      {/* 创建一个React Three Fiber的Canvas，其中包含各种光照、天空盒和3D模型 */}
      <Canvas
        className={`w-full h-screen bg-transparent ${isRotating ? "cursor-grabbing" : "cursor-grab"
          }`}
        camera={{ near: 0.1, far: 1000 }}
      >
        {/* 使用Suspense进行异步加载 */}
        <Suspense fallback={<Loader />}>
          {/* 添加各类灯光 */}
          <directionalLight position={[1, 1, 1]} intensity={2} />
          <ambientLight intensity={0.5} />
          <pointLight position={[10, 5, 10]} intensity={2} />
          <spotLight
            position={[0, 50, 10]}
            angle={0.15}
            penumbra={1}
            intensity={2}
          />
          <hemisphereLight
            skyColor='#b1e1ff'
            groundColor='#000000'
            intensity={1}
          />
          {/* 添加3D模型 */}
          <Bird />
          <Sky isRotating={isRotating} />
          <Island
            isRotating={isRotating}
            setIsRotating={setIsRotating}
            setCurrentStage={setCurrentStage}
            position={islandPosition}
            rotation={[0.1, 4.7077, 0]}
            scale={islandScale}
          />
          <Plane
            isRotating={isRotating}
            position={biplanePosition}
            rotation={[0, 20.1, 0]}
            scale={biplaneScale}
          />
        </Suspense>
      </Canvas>

      {/* 音乐播放/暂停按钮 */}
      <div className='absolute bottom-2 left-2'>
        <img
          src={!isPlayingMusic ? soundoff : soundon}
          alt='jukebox'
          onClick={() => setIsPlayingMusic(!isPlayingMusic)}
          className='w-10 h-10 cursor-pointer object-contain'
        />
      </div>
    </section>
  );
};

// 导出Home组件
export default Home;